<script setup lang="ts">
  import { PropType } from 'vue'
  import { SingleSelectConfig } from '../../hooks/types'

  defineOptions({
    name: 'OrderCustomFormSingleSelect',
  })

  const props = defineProps({
    placeholder: {
      type: String,
      default: () => '请选择选项',
    },
    options: {
      type: Array as PropType<SingleSelectConfig['options']>,
      default: () => [],
    },
    clear: {
      type: Boolean,
      default: () => true,
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'change', value: string | number | boolean): void
  }>()

  // 绑定的值
  const value = defineModel<string | number | boolean>('modelValue', { default: '' })

  /**
   * 选项选择事件
   */
  const handleChange = (val: string) => {
    emits('change', val)
  }
</script>

<template>
  <el-select
    v-model="value"
    :clearable="clear"
    :placeholder="props.placeholder"
    :disabled="props.disabled"
    @change="handleChange"
  >
    <el-option
      v-for="(option, optionIndex) in props.options"
      :key="optionIndex"
      :label="option.label"
      :value="option.value"
    />
  </el-select>
</template>
